<template>
  <div class="zj">
    <div class="bt">
      <p>课程列表</p>
    </div>
    <div class="zt">
      <el-table :data="tableData" style="width: 100%" align="center">
        <el-table-column prop="id" label="序号" width="100px" />
        <el-table-column prop="name" label="课程名称" width="200px" />
        <el-table-column prop="time" label="创建时间" width="150px" />
        <el-table-column prop="open" label="可见状态" width="150px">
          <template #default="scope">
            <el-switch v-model="scope.row.open" @change="changeSwitch(scope.row)" />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button :icon="EditPen" @click="bj(scope.row)"></el-button>
            <el-button :icon="Files" @click="zygl(scope.row)"></el-button>
            <el-button :icon="Monitor" @click="zypb(scope.row)"></el-button>
            <el-button :icon="School" @click="kk(scope.row)"></el-button>
          </template>
        </el-table-column>
        
      </el-table>
      <p v-if="message != ''">正在{{message}}</p>
    </div>
  </div>
</template>
<script setup>
import { Files, EditPen, Monitor, School } from "@element-plus/icons-vue";
</script>
<script>
// import { ElMessage } from 'element-plus'
// const kg = () => {
//   ElMessage('this is a message.')
//   type: 'success'
// }
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "Java课程设计", time: "2020-12-12", open: true },
        { id: 2, name: "MySQL数据库技术", time: "2021-12-11", open: true  },
        { id: 3, name: "Web前端开发基础", time: "2021-12-11", open: true  },
        { id: 4, name: "Web前端项目开发实战", time: "2021-12-11", open: true  },
      ],
      open: false,
      message:'',
    };
  },
  methods: {
    changeSwitch(val) {
      console.log(val);
      if (val.open === true) {
        this.$message.success(val.name + "现在是可见的")
      } else {
        this.$message.warning(val.name + "现在是不可见的")
      }
    },
    bj(val) {
      this.message = val.name + "编辑"
    },
    zygl(val) {
      this.message = val.name + "资源管理"
    },
    zypb(val) {
      this.message = val.name + "资源编排"
    },
    kk(val) {
      this.message = val.name + "开课"
    },
    // kg(val){
    //   ElMessage(val.name)
    // }
  },
};
</script>



<style scoped>
.zj {
  background-color: white;
  border: none;
  border-radius: 4px;
}
.bt {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid rgb(230, 227, 227);
}
.zt {
  height: 200px;
  margin-top: 25px;
}
p{
  background-color: white;
  padding: 15px;
}
</style>
